<script lang="ts" setup>
import { AliPayRefundData, BankRefundData } from '@/types/interface'
interface Form extends Record<string, any> {
  accountType: string
}
defineProps<{
  apartTime: boolean
  AliValue: string
  BankValue: string
  OriginValue: string
}>()
const form = defineModel<Form>({ required: true })
const AliPayAccountData = defineModel<AliPayRefundData>('alipay', { required: true })
const BankAccountData = defineModel<BankRefundData>('bank', { required: true })
const emits = defineEmits(['open'])
const emitsOpen = () => {
  emits('open')
}
</script>

<template>
  <el-form-item prop="accountType" label="退款渠道:">
    <el-radio-group v-model="form.accountType">
      <el-radio label="原路退回" :value="OriginValue" />
      <el-radio label="支付宝" :value="BankValue" :disabled="apartTime" />
      <el-radio label="银行卡" :value="AliValue" :disabled="apartTime" />
    </el-radio-group>
    <Transition mode="out-in">
      <span v-if="form.accountType === OriginValue" class="text-warning-light"
        >此订单在可原路退回时限内，不可使用其他方式退款</span
      >
      <span v-else-if="form.accountType === AliValue"
        >支付宝退款时请让用户打开转账权限，<span class="text-[#3677EC]" @click="emitsOpen"
          >如何打开转账权限></span
        ></span
      >
    </Transition>
    <Transition mode="out-in">
      <div v-if="form.accountType === AliValue" class="split-input-container">
        <el-input v-model="AliPayAccountData.aliName" placeholder="支付宝昵称" />
        <el-input v-model="AliPayAccountData.aliAccount" placeholder="支付宝账号" />
      </div>
      <div v-else-if="form.accountType === BankValue" class="bank-account-container">
        <el-input v-model="BankAccountData.bankName" placeholder="请输入开户行" />
        <el-input v-model="BankAccountData.bankBranchName" placeholder="请输入开户支行" />
        <div class="split-input-container">
          <el-input v-model="BankAccountData.username" placeholder="用户姓名" />
          <el-input v-model="BankAccountData.card" placeholder="银行卡号" />
        </div>
      </div>
    </Transition>
  </el-form-item>
</template>

<style scoped>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
.split-input-container {
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 2fr;
  column-gap: 10px;
}
.bank-account-container > div {
  margin-bottom: 10px;
}
</style>
